<template>
	<view class="wuyepay">
		<!-- 顶部 -->
		<!-- <view class="u-padding-30 head">
			<view class="u-font-32 u-margin-bottom-22"><h3>{{tableInfo.type=='1'?"水":"电"}}{{tableInfo.wp_model}}</h3></view>
			<view class="u-font-26 u-margin-bottom-22">楼号：{{address}}</view>
			<view class="u-font-26 u-margin-bottom-22">单价：{{tableInfo.unitPrice}}</view>
			<view class="u-font-26 u-margin-bottom-22">倍率：{{tableInfo.magnification}}</view>
			<view class="u-font-26 u-margin-bottom-22">型号：{{tableInfo.wp_model}}</view>
			<view class="u-font-26 u-margin-bottom-22">电表位置：{{tableInfo.wp_postion}}</view>
		</view> -->
		<view class="head">
			<view class="border-back">
				<view class="position-name" style="padding-bottom: 10px;margin-top: 10px;">
					
					<i></i><span style="margin-left: 10px;">{{address}}</span>
				</view>
				<!-- <view class="u-font-32 u-margin-bottom-22">{{name}}{{address}}</view> -->
				<view class="u-flex u-row-between u-m-t-12">
					<view class="u-font-26 u-margin-bottom-22"><span style="color: #999;">类型：</span>{{tableInfo.type=='1'?"水费":"电费"}}</view>
					<view class="u-font-26 u-margin-bottom-22"><span style="color: #999;">单价：</span>{{tableInfo.price}}元/m²/年</view>
		
				</view>
				<view class="u-flex u-row-between">
					<view class="u-font-26 u-margin-bottom-22">
						<!-- 单价：{{homelist.wuYePrice?homelist.wuYePrice+'/'+'平方米/'+(homelist.costsPeriodUnit==1?'年':homelist.costsPeriodUnit==2?'半年':homelist.costsPeriodUnit==3?'季度':'月'):'未设置'}} -->
		
						<span style="color: #999;">每期金额：</span><span
							style="color: #f29100;padding-right: 3px;">{{tableInfo.money}}元/期</span>
					</view>
					<!-- <view v-if="detailsDatas.roomInfo.normalWuYeMoney" class="u-font-26 u-margin-bottom-22"><span style="color: #999;">年物业费：</span>
						<span style="color: #f29100;font-size: 18px;padding-right: 3px;">{{Number(detailsDatas.roomInfo.normalWuYeMoney).toFixed(2)}}</span>元
					</view> -->
				</view>
				<!-- <view>物业附加费</view>
				<view class="box" v-if="payList.normalFuJiaMoney.length > 0">
					<view class="u-flex-1" v-for="(item,index) in payList.normalFuJiaMoney" :key='index'>
						{{item.costsSetChildName}}: ￥{{item.costsSetChildMoney}}
					</view>
				</view> -->
			<!-- 	<view class="btn">
					预缴费用
				</view> -->
			</view>
		</view>
		<!-- 主体内容 -->
		<!-- <view class="main">
			<view class="main_top"></view>
			<view class="mian_content u-padding-30 u-margin-bottom-34" 
			v-for="(item,index) in payList" :key='index' >
				<view class="u-flex">
					
					<view class="u-flex-1 u-margin-left-46">待缴</view>
				</view>
				<view class="u-flex u-margin-top-12">
					<view class="u-flex-1 u-margin-left-50">{{item.startTime.substr(0,10)}} 至 {{item.endTime.substr(0,10)}}</view>
				</view>
				<view class="pay-count">
					{{item.Due}} <span style="font-size: 15px;color: #333;margin-left: 5px;">元</span>
				</view>
			</view>
		</view> -->
		<view class="main">
			<view class="mian_content" v-for="(item,index) in payList" style="border-radius:20rpx;padding: 30rpx;">
				<view class="u-flex">
					<image style="width: 21px;height: 21px;padding-right: 5px;" src="../../static/index/fee.png"
						mode=""></image>
					<view>
						<span style="color: #999;" v-if="tableInfo.type=='1'">水费：</span>
						<span style="color: #999;" v-else>电费：</span>
						￥{{item.Due}}
					</view>
				</view>
				<view style="float: right;margin-top: -20px;">
					<view style="padding: 8rpx 20rpx;background: #F9A832;;color:#fff;border-top-left-radius:20rpx;border-bottom-right-radius:20rpx;" v-if="item.Payment_status === 1">待缴</view>
					<view style="padding: 8rpx 20rpx;background: #ff0000;color:#fff;border-top-left-radius:20rpx;border-bottom-right-radius:20rpx;" v-if="item.Payment_status === 0">欠费</view>
					<view style="padding: 8rpx 20rpx;background:#19be6b;color:#fff;border-top-left-radius:20rpx;border-bottom-right-radius:20rpx;;" v-if="item.Payment_status!=1&&item.Payment_status!=0">预缴</view>
				</view>
				<view class="u-flex u-m-t-10" style="margin-left: 26px;">
					<span style="color: #999;">缴费周期：</span>
					<view>{{item.begin_time.substr(0,10)}}~{{item.endTime.substr(0,10)}}</view>
				</view>
			<!-- 	<view class="u-flex u-row-between u-m-t-10">
					<view>
						
						<span
								style="color: red;margin-left: 50rpx;">违约金：</span>
							￥{{item.weiYueMoney}}
					</view>
					<view>
						<span style="color: #999;">违约天数：</span>{{item.arrearageDay}} 天
					</view>
				</view> -->
		
				<!-- <view style="color: #999;text-align: center;" v-if="item.chargeList == null">
					暂无附加费用
				</view> -->
		
				<!-- <view v-if="item.chargeList" style="background-color: #F4f4f4;width: 90%;margin: 9px auto;padding: 10px 20px;">
					<span style="color: blue;">附加费用</span>
					<view  v-for="(item1,index1) in item.chargeList" style="margin-left: 20rpx;">
						<view class="u-flex u-m-t-10">
							<span style="color: #999;">{{item1.costsSetChildName}}：</span>
							<view>{{item1.costsSetMoney.toFixed(2)}} 元</view>
						</view>
		
					</view>
				</view> -->
		
				<view style="text-align: right;margin-top: 10px;">
					合计：<span style="color: orange;padding-right: 2px;font-size:36rpx">{{Math.floor(item.Due*100)/100}}</span>元 </view>
			</view>
			<view style="display:flex;align-items: center;padding:20px 10px">
				<view style="margin-top:-10rpx">备注：</view>
				<!-- <u-input v-model="value" :type="type" :border="border" /> -->
				<input class="uni-input" style="width: 271px;padding: 5px 11px;background-color: #fff;margin-top: -6px;"
					placeholder="请输入您要备注的内容" />
			</view>
		</view>
		<!-- footer -->
		<view class="payment">
			<view class="redios" @click="clickChooseAll">
				<!-- <view v-if="chooseList.length != listdata.length" class="redio"></view>
				<image v-else class="redio" :style="chooseList.length == listdata.length ? 'border: none;' : ''"
					src="../../static/image/gou.png" mode=""></image>
				<view class="font-all" v-if="!chooseAll">全选</view>
				<view class="font-all" v-else>取消全选</view> -->
			</view>
			<view class="pay-all">
				<view>合计：</view>
				<view class="amount">￥{{money}}</view>
				<view class="btn-pay1" @click="payBtn">缴费</view>
			</view>
		</view>
		
		<!-- <view class="foot">
			<view class="footer u-padding-left-30 u-flex">
				<view class="u-flex-1 u-margin-top-32">
					<view style="font-size: 18px;">合计：<text class="txet">￥{{money}}</text></view>
				</view>
				<view class="u-flex">
					
					<view class="button" @click="payBtn">缴费</view>
				</view>
			</view>
		</view> -->
		
		
		<u-toast ref="uToast" />
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				tableInfo:{},
				num: 1,
				show: false,
				money:0,
				name: '',
				address: '',
				customStyle: {
					margin: '40rpx', // 注意驼峰命名，并且值必须用引号包括，因为这是对象

				},
				homelist: {},
				payList: [],
				//物业费合计
				payTotal: 0,
			}
		},
		onLoad(option){
			var obj = JSON.parse(option.val)
			this.tableInfo=obj;
		},
		onShow() {
			this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]

			this.name = this.homelist.proName;
			this.address = this.homelist.buildDistrictCode + '-' + this.homelist.buildTowerCode + '-' + this.homelist.roomUnitNumber +
				'-' + this.homelist.roomCode
			this.getPayDetails()
		},
		methods: {
			async getPayDetails() {
				let res = await this.$request.api.getMyTableDetails({
					id: this.tableInfo.id
				})
				this.payList = res.data.data.datalist
				console.log(this.payList)
				console.log(res.data.data.datalist)
				
				for (let a = 0; a < this.payList.length; a++) {
					this.$set(this.payList[a], 'selectionStatus', true);			
					this.money += parseFloat(Number(this.payList[a].Due).toFixed(2))
					
				
				}		
		
			},
			
			async payBtn() {
				if (this.money) {
					
					let res = await this.$request.api.getMyTableCostInfo({
						zMoney: this.money,
						room_id: this.homelist.roomId,
						phone: uni.getStorageSync('phone'),
						sDWpList: this.payList,
						proId: this.homelist.proId,
						id:this.tableInfo.id
					})
					console.log(res.data)
					if(res.data.code==0){
						this.money=0;
						console.log(res.data.data)
						var item = JSON.stringify(res.data.data);
						var item2 = JSON.stringify(this.tableInfo);
						uni.navigateTo({
							url: '/pages/forwater/billdetails?val='+item+"&val2="+item2
						});
					}else{
						this.$refs.uToast.show({
							title: res.data.msg,
							type: 'error'
						})
					}
					
					// this.$Router.push({path:'/pages/billdetails/billdetails',query:{id:res.data,money:this.payTotal}})
					// this.payTotal=0;
					
				}

			},
			// 取消
			cancel() {
				this.num = 1;
				this.show = false
			},
			
			// 定义加法函数
			add() {
				let args = arguments, //获取所有的参数
					lens = args.length, //获取参数的长度
					d = 0, //定义小数位的初始长度，默认为整数，即小数位为0
					sum = 0; //定义sum来接收所有数据的和
				//循环所有的参数
				for (let key in args) {
					//遍历所有的参数
					//把数字转为字符串
					let str = '' + args[key];
					if (str.indexOf('.') != -1) {
						//判断数字是否为小数
						//获取小数位的长度
						let temp = str.split('.')[1].length;
						//比较此数的小数位与原小数位的长度，取小数位较长的存储到d中
						d = d < temp ? temp : d;
					}
				}
				//计算需要乘的数值
				let m = Math.pow(10, d);
				//遍历所有参数并相加
				for (let key in args) {
					sum += args[key] * m;
				}
				//返回结果
				return Number(sum / m).toFixed(2);
			},
			// 定义减法
			sub(num1, num2) {
				let r1, r2, m, n;
				try {
					r1 = num1.toString().split('.')[1].length;
				} catch (e) {
					r1 = 0;
				}
				try {
					r2 = num2.toString().split('.')[1].length;
				} catch (e) {
					r2 = 0;
				}
				m = Math.pow(10, Math.max(r1, r2));
				return (Math.round(num1 * m - num2 * m) / m).toFixed(2);
			},
			changePay(item) {
				let payArr = this.payList.wuYeCost;
				this.allchecked = true
				let a = 0;
				if (payArr.length > 0) {
					this.payTotal = 0;
					payArr.map((item) => {
						if (!item.freeOrder) {
							if (!item.wuyechecked) {
								this.allchecked = false;
							} else {
								this.payTotal = this.add(this.payTotal, item.allMoney)
							}
						}
					});
				} else {
					this.allchecked = true;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	page{
		background: #f4f4f4;
	}
	.main {
		margin-bottom: 300rpx;
		padding: 20rpx;
		margin-top: -17px;
	}
	
	.mian_content {
		background: #fff;
		padding: 10rpx 30rpx;
		margin-top: 22rpx;
	}
	.position-name {
			font-size: 34rpx;
			font-weight: 550;
			color: #333333;
		}
	
		.position-name i {
			width: 6px;
			height: 16px;
			background: linear-gradient(180deg, #76D904 0%, #417505 100%);
			border-radius: 4px;
			display: inline-block;
			vertical-align: middle;
			margin-top: -3px;
		}
	
		.head {
			border-top: 1px solid rgba(0, 0, 0, .1);
			background: #f4f4f4;
			padding: 16rpx;
		}
		.border-back {
			// border: 1px solid red;
			background: rgb(255, 255, 255);
			width: 100%;
			margin: auto;
			// margin: 10px auto;
			border-radius: 10px;
			box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
			padding: 20rpx 44rpx;
		}
	.box {
		padding: 40rpx 20rpx;
		background: rgba(244, 244, 244, 1);
		border-radius: 6px;
		margin-top: 10rpx;

		view {
			display: inline-block;
			width: 50%;
			margin-bottom: 10rpx;
		}
	}

	.btn {
		text-align: center;
		width: 290rpx;
		height: 92rpx;
		border-radius: 50rpx;
		border: 1px solid rgba(249, 168, 50, 1);
		line-height: 92rpx;
		color: #F9A832;
		font-size: 32rpx;
		margin: 40rpx auto;
	}

	.head {
		border-top: 1px solid rgba(0, 0, 0, .1);
	}

	.main_top {
		height: 80rpx;
		background: rgba(244, 244, 244, 1);
	}

	.foot .footer {
		width: 100%;
		// height: 136rpx;
		position: fixed;
		bottom: 0;
		z-index: 99;
		background: rgba(255, 255, 255, 1);
	}

	.txet {
		color: #FD3636;
	}

	.main {
		margin-bottom: 136rpx;
	}

	.button {
		width: 242rpx;
		height: 45px;
		line-height: 45px;
		text-align: center;
		background: linear-gradient(142deg, #b2d48b 0%, #4c8a05 100%);
		color: #fff;
	}

	.bjq {

		padding-top: 15%;
		padding-left: 60rpx;
		padding-right: 60rpx;

	}
	.payment {
		width: 100vw;
		padding: 14rpx 30rpx;
		height: 108rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		background: #FFFFFF;
		box-shadow: 0rpx -2rpx 16rpx 0rpx rgba(0, 0, 0, 0.1);
	
		.redios {
			display: flex;
			align-items: center;
	
			.redio {
				width: 32rpx;
				height: 32rpx;
				margin-right: 20rpx;
				border-radius: 50%;
				border: 2rpx solid #CCCCCC;
			}
	
			.font-all {
				font-size: 28rpx;
				color: #666666;
			}
		}
	
		.pay-all {
			align-items: center;
			display: flex;
	
			.amount {
				font-size: 28rpx;
				color: #FD3636;
				margin-right: 20rpx;
			}
	
			.btn-pay1 {
				text-align: center;
				background: linear-gradient(142deg, #42770591 0%, #427705FF 100%);
				color: #fff;
				padding: 10px 32px;
				border-radius: 21px;
				margin-right: 10px;
				// margin-top: 10px;
			}
		}
	}
	.pay-count {
		font-size: 36rpx;
		font-weight: 600;
		color: #F9A832;
		align-items: center;
		margin-top: -37px;
		    text-align: right
	}
</style>
<style lang="scss">
	.bjq {
		.u-numberbox {
			display: flex !important;
			justify-content: space-between !important;
			width: 100% !important;
			border-top: 1px solid #DCDCDC;
			border-bottom: 1px solid #DCDCDC;
			padding: 40rpx 0;
		}


		.u-number-input {
			background-color: #fff !important;
		}

	}
</style>
